<template>
  <div class="main">
      {{class_name}}
      <div class="course_search">
        <el-form :inline="true">
            <el-form-item label="Course Name">
                <el-input v-model="serach_courseName"></el-input>
            </el-form-item>
            <el-form-item label="Teacher Name">
                <el-input v-model="serach_teacherName"></el-input>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" @click="get_course_table_data(class_modify_id)">Search</el-button>
            </el-form-item>
        </el-form>
      </div>
      <div class="course_table">
          <el-table :data="course_table_data" @row-click="course_details" height="600" width="600" style="width: 100%">
                <el-table-column width="100" prop="no" label="ID"></el-table-column>
                <el-table-column prop="courseName" label="Course Name"></el-table-column>
                <el-table-column prop="userName" label="Teacher Name"></el-table-column>
                <el-table-column  width="200" label="Action">
                     <template slot-scope="scope">
                    <el-button type="primary" v-on:click="btn_course_remove(scope)">
                    Remove
                    </el-button>
                    </template>
                </el-table-column>
            </el-table>
      </div>
      <div class="course_add">
            <el-form :inline="true">
                <el-form-item label="Course:">
                    <el-select v-model="list_course_search" @click.native="load_course_list"  @change="select_get_course" clearable  filterable placeholder="Please choose">
                        <el-option v-for="item in list_course" :key="item.id" :label="item.value" :value="item.id">
                            {{item.value}}<span>#{{item.id}}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Teacher:">
                    <el-select v-model="list_teacher_search" @click.native="load_teacher_list" @change="select_get_teacher" clearable  filterable placeholder="Please choose">
                        <el-option v-for="item in list_teacher" :key="item.id" :label="item.value" :value="item.id">
                            {{item.value}}<span>#{{item.id}}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                 <button v-on:click="btn_course_add">Add Course</button>
                </el-form-item>
            </el-form>
        </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
    props:['class_modify_id']
    ,
    data() {
        return {
            class_name:"",
            list_course:[],
            list_course_search:"",
            list_teacher:[],
            list_teacher_search:"",
            course_table_data:[],
            serach_courseName:"",
            serach_teacherName:"",
        }
    },
    methods: {
        course_details(){

        },
        btn_course_remove(row){
            let user = JSON.parse(sessionStorage.getItem("user"));
            let token = sessionStorage.getItem("token");
            let id = row.row.id;
            let that = this;
            axios({
                headers: {
                "Content-Type": "application/json;charset=UTF-8",
                token: token,
                },
                method: "Post",
                url: "http://localhost:8081/user-admin/removeCourseFormClass",
                data: JSON.stringify({
                operator:user.uid,
                id:id
                }),
            }).then(function (r) {
                let result = JSON.parse(JSON.stringify(r));
                if (result.data.code === "0") {
                alert("remove succeed");
                that.get_course_table_data(that.class_modify_id);
                } else {
                alert(result.data.msg);
                }
            });
        },
        btn_course_add(){
            let user = JSON.parse(sessionStorage.getItem("user"));
            let token = sessionStorage.getItem("token");
            let courseId =Number(this.list_course_search);
            let teacherUid =Number(this.list_teacher_search);
            let that = this;
            axios({
                headers: {
                "Content-Type": "application/json;charset=UTF-8",
                token: token,
                },
                method: "Post",
                url: "http://localhost:8081/user-admin/addNewCourseIntoClass",
                data: JSON.stringify({
                operator:user.uid,
                courseId:courseId,
                teacherUid:teacherUid,
                classId:that.class_modify_id
                }),
            }).then(function (r) {
                let result = JSON.parse(JSON.stringify(r));
                if (result.data.code === "0") {
                alert("add succeed");
                that.get_course_table_data(that.class_modify_id);
                } else {
                alert(result.data.msg);
                }
            });
        },
        select_get_course(){
            // console.log(this.list_course_search);
        },
        select_get_teacher(){
            // console.log(this.list_teacher_search);
        },
        load_teacher_list(){
            let token = sessionStorage.getItem("token");
            let that = this;
            this.list_teacher=[];
            axios({
                headers: {
                token: token,
                },
                method: "Get",
                url: "http://localhost:8081/user-info/getAllTeacher"
            }).then(function (r) {
                let result = JSON.parse(JSON.stringify(r));
                if (result.data.code === "0") {
                    for (let i in result.data.data.data) {
                        that.list_teacher.push({
                            value: result.data.data.data[i].userName,
                            id: result.data.data.data[i].uid,
                        });
                    }
                } else {
                    alert(result.data.msg);
                }
            });
        },
        load_course_list(){
            let token = sessionStorage.getItem("token");
            let that = this;
            this.list_course=[];
            axios({
                headers: {
                token: token,
                },
                method: "Get",
                url: "http://localhost:8081/course-info/getAllCourseInfo",
                params:{
                    id:that.class_modify_id,
                }
            }).then(function (r) {
                let result = JSON.parse(JSON.stringify(r));
                if (result.data.code === "0") {
                    for (let i in result.data.data.data) {

                        that.list_course.push({
                            value: result.data.data.data[i].courseName,
                            id: result.data.data.data[i].id,
                        });
                    }
                } else {
                    alert(result.data.msg);
                }
            });
        },
        get_course_table_data(classId){
            let token = sessionStorage.getItem("token");
            let that = this;
            this.course_table_data=[];
            // let courseName = that.serach_courseName;
            // let teacherName = that.serach_teacherName;
            axios({
                headers: {
                token: token,
                },
                method: "Get",
                url: "http://localhost:8081/course-class/getCourseClass",
                params:{
                    courseName:that.serach_courseName,
                    teacherName:that.serach_teacherName,
                    classId:classId,
                    pageSize:999
                }
            }).then(function (r) {
                let result = JSON.parse(JSON.stringify(r));
                if (result.data.code === "0") {
                    that.serach_teacherName="";
                    that.serach_courseName="";
                    let x =1;
                    for(let i of result.data.data.data){
                        i.no = x++;
                    }
                    that.course_table_data=result.data.data.data;
                } else {
                    alert(result.data.msg);
                }
            });
        },
    }
}
</script>

<style  scoped>
* {
  margin: 0;
  padding: 0;
}
html,
body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.main{
    width: 120%;
    height: 130%;
    position: relative;
    top: -20%;
    left: -10%;
    background-color:rgb(255, 255, 255);
}
button{
    background-color: rgb(73, 122, 214);
    border: none;
    border-radius: 5px;
    font-size: 15px;
    height: 40px;
    width: 120px;
    font-style: normal;
    color: white;
}
button:hover{
    background-color: rgba(23, 79, 182, 0.473);
}
span{
    position: relative;
    padding: 20px;
    font-size: 10px;
    color: rgba(6, 124, 192, 0.404);
}
</style>
